<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/my.js">
</script>

<div id="divmenu">
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=猪手">猪手</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=鸡翅">鸡翅</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=野鸡炖蘑菇">野鸡炖蘑菇</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=龙虾">龙虾</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=炒花甲">炒花甲</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=烤全羊">烤全羊</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=烧鸡">烧鸡</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=炖蛇汤">炖蛇汤</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=排骨汤">甲鱼汤</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=烤鸭">烤鸭</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=白鸽肉">白鹤肉</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=多宝鱼">多宝鱼</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=野鸡肉">野鸡肉</a>
	<a
		href="${pageContext.request.contextPath}/product/pageListProduct.action?category=满汉全席">满汉全席</a>
	<a href="${pageContext.request.contextPath}/product/pageListProduct.action"
		style="color:#FFFF00">全部菜单目录</a>
</div>
<div id="divsearch">
	<form action="${pageContext.request.contextPath}/product/pageListProduct.action"
		method="post">
		<table width="100%" border="0" cellspacing="0">
			<tr>
				<td style="text-align:right; padding-right:220px">
					<!--查询中的文本框 -->
				Search <input
					type="text" name="name" class="inputtable"
					id="searchName" />
					<input type="image" src="images/serchbutton.gif"
					border="0" style="margin-bottom:-4px">
				</td>
			</tr>
		</table>
	</form>
</div>
<!--用于显示ajax查询结果的div，设置默认隐藏，给这个框在添加央样式 -->
<div id="qhy" style="border: 1px solid red;background-color:white;width: 128px;position:absolute;
left: 1115px;top: 136px;display: none">
</div>
<script type="text/javascript">
  var  searchName=document.getElementById("searchName");//获取搜索框
  var div=document.getElementById("qhy");//获取显示数据的div
	searchName.onkeyup=function () {
		var name=searchName.value //获取搜索框中的值
		if(name==""){
            div.style.display="none" //如果搜索框中的值为空，就将显示框隐藏
			return;
		}
		var req=getXMLHttpRequest();//获取ajax对象
		req.onreadystatechange=function () {

		    if (req.readyState==4){
		        if(req.status==200){
                    var rs=eval("("+req.responseText+")");//获取到后台通过搜框中内容返回来的数据
		            var qhy=document.getElementById("qhy");
		            //var ss=yy.split(",");//将字符串切割成数组
		            var childDivs=""
		            for (var i=0;i<rs.length;i++){//遍历数据组
						//每一个数组放在一个div中，添加鼠标移入移出事件，移入的话变色，添加鼠标点击事件，点击就将数据赋值到搜索框中
		                childDivs+="<a href='javascript:void(0)'><div onmousemove='yy(this)' onmouseout='hy(this)' " +
							"onclick='choose(this)'>"+rs[i]+"</div></a>"
					}
					qhy.innerHTML=childDivs;//将数据内容放到显示框中
					div.style.display="block";//有数据就将显示框显示出来
				}

			}
        }
		req.open("get","${pageContext.request.contextPath}/product/ajaxSelect.action?name="+name);//创建连接

		req.send(null);
    }
    function yy(div) {//鼠标移入事件
	    div.style.backgroundColor="gray"
    }
    function hy(div) {//鼠标移出事件
	    div.style.backgroundColor="white"

    }
    function choose(divyy) {//鼠标点击事件

        searchName.value=divyy.innerHTML  //将选中的文字赋值给搜索框
		div.style.display="none";   //将div隐藏
    }
</script>
